<template>
  <layoutBlock >
    <div class="content">
      <div class="">
        <!--      <Select filterable v-model="condition.car_type_code" clearable placeholder="请选择类型" @on-change="getData">-->
        <!--        <Option v-for="item in statusList" :value="item.car_type_code" :key="item.car_type_code">{{ item.car_type_name }}</Option>-->
        <!--      </Select>-->
        <Input class="mb10" search v-model="condition.keyword" placeholder="请输入单位名称" @on-search="getData" />
        <template v-if="_.get(info,'orgType')!='USER'">
        <Button  class="ml10 fr"  @click="getEdit('',true)"><Icon type="md-add" />新增单位</Button>
        <Button class="ml10 fr" type="error" @click="delAll">删除</Button>
        </template>
      </div>
      <Table :loading="loading" @on-selection-change="selectList" border class="mt20" ref="selection" :columns="columns2" :data="data1">

        <template slot-scope="{ row, index }" slot="regdate" >
          <span>{{row.regdate?moment(row.regdate).format('YYYY-MM-DD'):'-'}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action" >
          <div v-if="_.get(info,'orgType')!='USER'&&row.canOper">
            <span  class="cursor cr2d8cf0" @click="getEdit(row,false)">编辑</span>
            <span  class="cursor cr2d8cf0" @click="getDel(row,1)">删除</span>
          </div>
        </template>
      </Table>
      <div class="disflex mt30">
        <Page :total="total" v-if="total>condition.limit"  :current="condition.start" show-elevator @on-change="changepage"></Page>
      </div>
      <Modal :mask-closable="false" footer-hide  v-model="isShow":title="isAdd?'新增单位':'编辑单位'" width="500">
        <companyEditor :unitTypeList="unitTypeList" :orgList="orgList" :list="statusList" :isAdd="isAdd" :editorData="editorData" v-if="isShow" @success="success"></companyEditor>
      </Modal>
      <Modal
          v-model="isShow2"
          title="删除"
          @on-ok="getDel('',2)"
          @on-cancel="cancel" width="350">
        <div class="input-item">
          警告，删除单位将一并删除单位下所有项目、护栏、设备、人员等信息，确认删除？
        </div>
      </Modal>
    </div>
  </layoutBlock>
</template>
<script>
    import companyEditor from '../../components/userManage/companyEditor';
    import { unitType, companyList, companyDel } from '@/api/userManage';
    import { regionTree, orgTree } from '@/api/base'
    import tool from '../../libs/tool';
    import base from '@/mixins/base';
    import { mapState } from 'vuex';
    export default {
        mixins: [base],
        components: { companyEditor },
        computed: {
            ...mapState('admin/user', [
                'info'
            ])
        },
        data () {
            return {
                loading: false,
                total: 0, // 总条数
                roleId: '',
                editorData: {},
                title: '编辑',
                statusList: [],
                unitTypeList: [],
                condition: {// 头部筛选传参
                    keyword: '',
                    limit: 10,
                    start: 1,
                    is_enable: ''
                },
                columns2: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '单位名称',
                        key: 'name',
                        ellipsis: true
                    },
                    {
                        title: '单位简称',
                        key: 'shortName',
                        ellipsis: true
                    },
                    {
                        title: '单位地址',
                        key: 'address',
                        ellipsis: true
                    },
                    {
                        title: '注册时间',
                        slot: 'regdate',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 120,
                        align: 'center'
                    }
                ],
                data1: [],
                isShow: false,
                isShow2: false,
                isShow3: false,
                isShow4: false,
                detail: '',
                ids: '',
                isAdd: true,
                noShow: false,
                userId: '',
                isShowUser: false,
                selectlist: [],
                orgList: []

            }
        },
        created () {
            this.getType();
            this.getData();
            this.getRegionTree();
            this.getOrgTree();
        },
        filters: {
            format (arr) { // 这里不能用类似与formatDepts 驼峰命名 不然模版中使用会编译报错
                let res = (arr || []).map(item => {
                    return item.name
                })
                return res.join('、')
            }
        },
        methods: {
            async getOrgTree () {
                let res = await orgTree({});
                this.orgList = tool.formatTree(_.get(res, 'data') || [], 'children', 'lable', 'id', false, false);
            },
            async getRegionTree () {
                let res = await regionTree({});
                console.log(res, 'res====')
                this.statusList = tool.formatTree(_.get(res, 'data') || [], 'children', 'lable', 'id', false, false);
            },
            async getType () {
                let res = await unitType({});
                this.unitTypeList = _.get(res, 'data') || [];
            },
            selectList (value) {
                this.condition.start = 1;
                this.selectlist = value
            },
            delAll () {
                let arr = this.selectlist.map(item => {
                    return item.id
                })
                if (arr.length == 0) {
                    this.$Message.warning('请先选择单位！')
                    return
                }
                this.getDel({ id: arr.join() }, 1)
            },
            success () {
                this.getData();
                this.isShow = false;
                this.isShow03 = false;
            },
            // 获取列表
            async getData () {
                this.loading = true;
                let res = !this.orgIds ? this.defaultListData : await companyList({ ...this.condition, pOrgId: this.orgIds });
                this.loading = false;
                this.data1 = _.get(res, 'data.records') || [];
                this.data1.map(item => {
                    item._disabled = _.get(this.info, 'orgType') == 'USER' || !item.canOper;
                })
                this.total = _.get(res, 'data.total') || 0;
            },
            // 分页companyType
            changepage (page) {
                this.condition.start = page
                this.getData()
            },
            getEdit (row, types) {
                this.isAdd = types;
                this.isShow = true;
                if (types) return;
                let { address, shortName, name, id, regdate, type } = row;
                let regionCode = [];
                if (row.province) regionCode.push(row.province);
                if (row.city) regionCode.push(row.city);
                if (row.district) regionCode.push(row.district);
                this.editorData = { address, shortName, name, id, regdate, regionCode, type }
            },
            async getDel (row, type) {
                if (type == 1) {
                    this.ids = row.id
                    this.isShow2 = true;
                } else {
                    let res = await companyDel({ orgIds: this.ids });
                    if (_.get(res, 'code') == 0) {
                        this.$Message.success({
                            duration:1.5,
                            content:'删除成功',
                            onClose:function(){
                                window.location.reload();
                            }
                        })
                        // this.isShow2 = false;
                        // this.getData();
                    } else {
                        this.$Message.error(_.get(res, 'message') || '删除失败！')
                    }
                }
            },

            cancel () {}
        }
    }
</script>

<style scoped lang="less">

</style>
